<template>
  <div class="login" :style="{minHeight: minHeight}">
    <van-icon class="arrowLeft" name="arrow-left" @click="goTo()" />
    <div class="login-card bgwrite">
      <!-- 登录 -->
      <div class="top-bg">
        <div class="background-name">
          <div class="img-case"></div>
        </div>
        <div style="position: absolute; top: 0;
      width: 100%;
      height: 4.5rem;">
          <div class="default-img">
            <img src="@/assets/img/login/allpersoan.png" alt />
            <!-- <div class="img-content">
          <img src="@/assets/img/login/personicon.png"
               alt="">
            </div>-->
          </div>
        </div>
      </div>
      <div class="reset-wrapper bgwrite">
        <div class="loginWrap">
          <div class="loginForm">
            <div class="loginPhone" ref="loginPhoneref">
              <img src="@/assets/img/login/contract.png" class="fl phoneIcon" />
              <form>
                <input
                  type="number"
                  :placeholder="phoneNumP"
                  class="phoneInput"
                  v-model="phoneNum"
                  ref="phoneInputref"
                  @blur="setBMH"
                  @click="inputfocusPhone"
                  v-on:input="inputPhone"
                />
              </form>
              <img
                v-if="phoneNum"
                class="pwd-right"
                src="@/assets/img/login/cancelBtn.png"
                alt
                @click="phoneNumClear"
              />
            </div>
            <div class="loginPassword" ref="loginPasswordref">
              <img src="@/assets/img/login/pwd.png" class="phoCodeIcon" />
              <form>
                <input
                  type="password"
                  :placeholder="phoPwdP"
                  class="phoCodeInput"
                  v-model="phoPwd"
                  ref="loginPhoPwdref"
                  @blur="setBMH"
                  @click="inputfocusPwd"
                  v-on:input="inputPhoPwd"
                />
              </form>
              <!-- <img class="pwd-right" src="@/assets/img/login/closeEye.png" alt=""> -->
            </div>
            <div class="contract-forget">
              <div class="contract-left">
                <van-checkbox v-model="checked" checked-color="#5E8EFE" class="checkbox-style">
                  <div class="contract-word" @click="goUserContract">平台协议</div>
                </van-checkbox>
              </div>
              <div class="forget-right">
                <input
                  type="button"
                  v-model="getPhoCode"
                  class="getphoCodeR"
                  @blur="setBMH"
                  @click="regetPassword"
                />
              </div>
            </div>
            <!-- 登录按钮 -->
            <div class="loginBtn wordsWrite" @click="loginClick">
              <p class="loginFont">{{ loginState }}</p>
            </div>
            <div class="go-register" @click="goRegister">注册新账号</div>
          </div>
        </div>
      </div>
      <van-dialog
        v-model="isUser"
        confirm-button-text="去更改"
        confirm-button-color="#5E8EFE"
        cancel-button-color="#000000"
        show-cancel-button
        show-confirm-button
        @confirm="confirmCorrect"
        @cancel="cancelCorrect"
      >
        <div class="dialog-case">
          <div class="header-case">是否更改初始密码</div>
          <div class="content-words">您的账号密码为平台分配的初始密码，为保证账号隐私风险，建议您重新修改密码</div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { mapMutations, mapState } from "vuex";
import { Dialog } from "vant";
import {
  setUserLogin,
  setVersionNo,
  setToken,
  getToken,
  getRole,
  setuserUid,
  setRole,
  setPassword,
  getUserLogin
} from "@/utils/auth.js";
Vue.use(Dialog);
export default {
  name: "login",
  components: {},
  data() {
    return {
      getPhoCode: "忘记密码",
      loginState: "登录",
      phoneRegular: /^1[0-9]\d{9}$/,
      pswdNumRegular: /^[a-zA-Z0-9]{6,12}$/,
      phoneNum: "",
      phoneNumP: "请输入你的手机号",
      phoPwd: "",
      phoPwdP: "请输入密码",
      phoneType: "",
      checked: true,
      isUser: false,
      userLogin: null,
      newVersionNo: "",
      downUrl: "",
      minHeight: "100%"
      // showToast: false
    };
  },
  computed: {
    ...mapState({
      WilLoginPhone: state => state.WilLoginPhone,
      willLoginPwd: state => state.willLoginPwd
    })
  },
  created() {
    if ((this.$route.params.hasContent = "2")) {
      this.phoneNum = this.WilLoginPhone;
      this.phoPwd = this.willLoginPwd;
    }
  },
  mounted() {
    this.getVersion(); //版本更新
  },
  methods: {
    goTo() {
      this.$router.push("/touristLogin");
    },
    setBMH() {
      this.minHeight = "100vh";
    },
    setFMH() {
      this.minHeight = "130vh";
    },
    // 手机号focus
    inputfocusPhone() {
      this.$refs.phoneInputref.focus();
      this.setFMH();
    },
    // 密码focus
    inputfocusPwd() {
      this.$refs.loginPhoPwdref.focus();
      this.setFMH();
    },
    // 手机删除
    phoneNumClear() {
      this.phoneNum = "";
    },
    showToast(msg) {
      this.$toast({
        message: msg,
        onClose: function() {
          // 暂时 跳转
          this.$router.push("/designer");
        }
      });
    },
    // 忘记密码
    regetPassword() {
      const _self = this;
      _self.setWilLoginPhone(_self.phoneNum);
      _self.setWillLoginPwd(self.phoPwd);
      _self.$router.push({ name: "forgetPwd", params: { fromW: "forgetPwd" } });
    },
    goRegister() {
      this.$router.push("/register");
    },
    // 跳转合同
    goUserContract() {
      const _self = this;
      _self.setWilLoginPhone(_self.phoneNum);
      _self.setWillLoginPwd(_self.phoPwd);
      _self.$router.push({ path: "userContract", query: { fromW: "loginF" } });
    },
    // 电话非空校验
    inputPhone() {
      if (this.phoneNum !== "") {
        this.$refs.loginPhoneref.style = "border-bottom: 1px solid #e6e6e6;";
        this.$refs.phoneInputref.style = "color:#333131;";
      }
    },
    // 密码非空
    inputPhoPwd() {
      if (this.phoPwd !== "") {
        this.$refs.loginPhoPwdref.style = "color:#333131;";
        this.$refs.loginPasswordref.style = "border-bottom: 1px solid #e6e6e6;";
      }
    },
    loginClick() {
      if (this.phoneNum === "") {
        this.$refs.loginPhoneref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.phoneInputref.style = "color:#EA1F36;";
        this.phoneNumP = "手机号无法为空";
        return false;
      } else if (!this.phoneRegular.test(this.phoneNum)) {
        this.$refs.loginPhoneref.style = "border-bottom: 1px solid #EA1F36;";
        this.$refs.phoneInputref.style = "color:#EA1F36;";
        this.phoneNum = "";
        this.phoneNumP = "请输入正确的手机号";
        return false;
      } else if (this.phoPwd === "") {
        this.$refs.loginPhoPwdref.style = "color:#EA1F36;";
        this.$refs.loginPasswordref.style = "border-bottom: 1px solid #EA1F36;";
        this.phoPwdP = "请输入密码";
        return false;
      } else if (!this.pswdNumRegular.test(this.phoPwd)) {
        this.$refs.loginPhoPwdref.style = "color:#EA1F36;";
        this.$refs.loginPasswordref.style = "border-bottom: 1px solid #EA1F36;";
        this.phoPwd = "";
        this.phoPwdP = "密码须 6 - 12 位数字/字母";
        return false;
      } else if (!this.checked) {
        this.$toast({ message: "请勾选平台协议" });
        return false;
      }
      this.Codelogin();
    },
    // 去修改密码
    confirmCorrect() {
      this.$router.push({ name: "forgetPwd", params: { fromW: "originPwd" } });
    },
    // 放弃修改密码 -- 正常登录 表现师
    cancelCorrect() {
      setUserLogin(this.userLogin);
      setToken(this.userLogin.token);
      setuserUid(this.userLogin.uid);
      setRole(this.userLogin.role);
      this.$router.push("/performance/homePage");
    },
    // 版本检测
    async getVersion() {
      const SPC = await HTTP("getVersion", {
        version: this.$v
      });
      if (SPC.code == 200) {
        if (SPC.data.version) {
          setVersionNo(SPC.data.version)
        } else {
          setVersionNo('1.0')
        }
        this.downUrl = SPC.data.downUrl;
        // this.downUrl = 'http://app.gongpaipai.com/pic/H54B04E4F_0531160120.apk'
        if (this.downUrl) {
          // 弹框立即下载
          Dialog.alert({
            title: "有新版本啦！",
            message: "更新更全功能，给您更好的使用体验",
            confirmButtonText: "立即升级"
          }).then(() => {
            this.jumpToAppMarket();
          });
        }
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    //登录
    async Codelogin() {
      const _self = this;
      const codeLogin = await HTTP("codeLogin", {
        loginName: _self.phoneNum,
        password: _self.$md5(_self.phoPwd)
      });
      if (codeLogin.code == 200) {
        // 弹框处理 第一次记录
        _self.userLogin = codeLogin.data;
        if (codeLogin.data.lastLoginDate == "") {
          _self.isUser = true;
        } else {
          console.log(codeLogin);
          // 老用户记录 多次登录
          setUserLogin(codeLogin.data);
          setToken(codeLogin.data.token);
          setuserUid(codeLogin.data.uid);
          setRole(codeLogin.data.role);
          setPassword(codeLogin.data.password); //获取环信登陆密码
          _self.setWilLoginPhone("");
          _self.setWillLoginPwd("");
          _self.setWillUserPhone("");
          _self.setWillUserCode("");
          _self.setWillUserPwd("");
          _self.setWillUserPwdCheck("");
          _self.setIsPay(codeLogin.data.isPay);
          _self.setTabIndex(0);
          _self.setTabIndexP(0);
          const toast = _self.$toast.success({
            duration: 2000, // 持续展示 toast
            forbidClick: true, // 禁用背景点击
            message: "登录成功"
          });
          let second = 2;
          const timer = setInterval(() => {
            second--;
            if (!second) {
              clearInterval(timer);
              _self.$toast.clear();
              if (codeLogin.data.role == "2") {
                //  表现师 2
                _self.$router.push("/performance/homePage");
              } else if (codeLogin.data.role == "3") {
                //改图师 3
                _self.$router.push("/performance/homePage");
              } else {
                // 1设计师2:表现师3:改图师4:售前客服5:售后客服6:游客7:管理员8:其他
                _self.$router.push("/designer/homePage");
              }
            }
          }, 1000);
        }
      } else {
        _self.$toast({ message: codeLogin.msg });
      }
    },
    //跳转第三方应用平台
    jumpToAppMarket() {
      let _this = this;
      if (window.plus.os.name == "iOS") {
        location.href = 'https://apps.apple.com/cn/app/%E5%9B%BE%E5%B0%8F%E5%8A%A9-%E5%AE%A4%E5%86%85%E6%95%88%E6%9E%9C%E5%9B%BE%E4%B8%8A%E9%97%A8%E6%9C%8D%E5%8A%A1/id1471613155?from=singlemessage&isappinstalled=0';
        const toastI = _this.$toast.loading({
          duration: 3000, // 持续展示 toast
          forbidClick: true, // 禁用背景点击
          message: "上APP Store, 有最新版本哦~"
        });
        let secondI = 3;
        const timerI = setInterval(() => {
          secondI--;
          if (!secondI) {
            clearInterval(timerI);
            // _this.$toast.clear();
          }
        }, 3000);
      } else if (window.plus.os.name == "Android") {
		  location.href =  'https://a.app.qq.com/o/simple.jsp?pkgname=io.dcloud.H59C01B9C&from=singlemessage&isappinstalled=0'
      }
    },
    ...mapMutations([
      "setWillUserPhone",
      "setWillUserCode",
      "setWillUserPwd",
      "setWillUserPwdCheck",
      "setWilLoginPhone",
      "setWillLoginPwd",
      "setIsPay",
      "setTabIndex",
      "setTabIndexP"
    ])
  }
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  background: #fff;
}
.login-card {
  width: 100%;
  height: 100%;
  .top-bg {
    position: relative;
    width: 100%;
    height: 4.5rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    .background-name {
      position: absolute;
      top: 0;
      width: 100%;
      height: 4.5rem;
      .img-case {
        width: 100%;
        height: 4.5rem;
        margin: 0 auto;
        background-image: url(../../assets/img/login/backgroundIcon.png);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% 4.5rem;
      }
    }

    .default-img {
      position: relative;
      left: calc(50% - 1.11rem);
      top: calc(50% - 1.11rem);
      display: inline-block;
      box-sizing: border-box;
      width: 2.22rem;
      height: 2.22rem;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1558);
      img {
        width: 2.22rem;
        height: 2.22rem;
      }
      // .img-content {
      //   position: absolute;
      //   top: calc(50% - 0.57rem);
      //   left: calc(50% - 0.57rem);
      //   border: 0.02rem solid rgba(0, 0, 0, 0.1037);
      //   width: 1.14rem;
      //   height: 1.14rem;
      //   border-radius: 50%;
      //   img {
      //     width: 1.14rem;
      //     height: 1.14rem;
      //     border-radius: 50%;
      //   }
      // }
    }
  }
  .reset-wrapper {
    position: absolute;
    width: 100%;
    border-radius: 0.8rem 0.8rem 0rem 0rem;
  }
  .loginWrap {
    width: 80%;
    margin: 0 auto;
    .LoginFont {
      width: 100%;
      font-size: 0.26rem;
      font-weight: 500;
      margin-top: 0.4rem;
    }
    .loginForm {
      position: relative;
      width: 100%;
      margin-top: 0.5rem;
      .loginPhone {
        position: relative;
        width: 100%;
        height: 1rem;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        border: 1px solid #e5e5e5;
        border-radius: 0.1rem;
        padding: 0 0.24rem;
        .phoneIcon {
          width: 0.3rem;
        }
        .phoneInput {
          // 解决在 ios 下点击 input 页面空白问题
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          width: 4.5rem;
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
        }
        .pwd-right {
          position: absolute;
          width: 0.3rem;
          right: 0.24rem;
          top: 0px;
          bottom: 0px;
          margin: auto;
        }
      }
      // 密码
      .loginPassword {
        position: relative;
        width: 100%;
        height: 1rem;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        border: 1px solid #e5e5e5;
        border-radius: 0.1rem;
        padding: 0 0.24rem;
        margin-top: 0.24rem;
        .phoCodeIcon {
          width: 0.3rem;
        }
        .phoCodeInput {
          // 解决在 ios 下点击 input 页面空白问题
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          width: 5rem;
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
        }
        .getphoCode {
          width: 1.9rem;
          height: 0.4rem;
          background-color: transparent;
          border: 1px solid #1e8fff !important;
          color: #1e8fff;
          border: 0;
          margin-left: auto;
          border-radius: 0.04rem;
          font-size: 0.22rem;
          line-height: 0.4rem;
        }
      }
      .contract-forget {
        position: relative;
        width: 100%;
        margin-top: 0.5rem;
        div {
          display: inline-block;
        }
        .contract-left {
          .contract-word {
            display: inline-block;
            color: #5e8efe;
            font-size: 0.28rem;
            font-family: PingFangSC-Regular;
            font-weight: 400;
          }
        }
        .forget-right {
          position: absolute;
          top: 0;
          right: 0;
          height: 0.2rem;
          text-align: right;
          input {
            background: transparent;
            border: 0;
            color: #959595;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 0.28rem;
          }
        }
      }
      .loginPhoCode {
        width: 100%;
        height: 1rem;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        margin-top: 0.2rem;

        .phoCodeIcon {
          width: 0.3rem;
        }
        .phoCodeInput {
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
        }
        .getphoCode {
          width: 1.6rem;
          height: 0.4rem;
          background-color: transparent;
          border: 1px solid #1e8fff !important;
          color: #1e8fff;
          border: 0;
          margin-left: auto;
          border-radius: 0.04rem;
          font-size: 0.22rem;
          line-height: 0.4rem;
        }
        .getphoCodeR {
          width: 1rem;
          height: 0.4rem;
          background-color: #a4a09c;
          border: 0;
          margin-left: auto;
          border-radius: 0.04rem;
          font-size: 0.22rem;
        }
      }

      .loginBtn {
        margin-top: 0.5rem;
        width: 100%;
        height: 0.9rem;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.1rem;
        font-size: 0.3rem;
        background: #5e8efe;
      }
      .go-register {
        margin-top: 0.5rem;
        width: 100%;
        height: 0.32rem;
        text-align: center;
        line-height: 0.32rem;
        font-size: 0.32rem;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #656565;
      }
      .temp-btns {
        margin-top: 0.5rem;
        button {
          width: 40%;
          margin: 0 30%;
        }
      }
    }
  }
  .dialog-case {
    box-sizing: border-box;
    padding: 0.4rem;
    .header-case {
      width: 100%;
      color: #080808;
      line-height: 0.5rem;
      font-family: PingFangSC-Regular;
      font-size: 0.36rem;
      text-align: center;
    }
    .content-words {
      margin-top: 0.2rem;
      color: #9b9b9b;
      font-size: 0.3rem;
      font-family: PingFangSC-Regular;
      line-height: 0.42rem;
      text-align: center;
      text-indent: 0.2rem;
    }
  }
}
.arrowLeft {
  position: absolute;
  font-size: 0.38rem;
  color: #e5e5e5;
  margin: 0.38rem 0.38rem;
  z-index: 999999;
}
</style>
